<template>
  <div class="box searchBox">
    <van-nav-bar
      :title="wd + brand"
      right-text="购物车"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/cart')"
    />
    <van-dropdown-menu>
      <van-dropdown-item @change="onChange" v-model="value" :options="option" />
      <van-dropdown-item title="筛选" ref="item">
        <div class="price">
          <input type="text" v-model="min">
          ~
          <input type="text" v-model="max">
        </div>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <transition-group name="myMove">
      <div
        v-for="item in renderList"
        :key="item.proId"
      >
        <van-card
          :price="item.price"
          :title="item.proName"
          :thumb="item.proImg"
        />
      </div>
    </transition-group>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, DropdownMenu, DropdownItem, Card } from 'vant'
import { search } from '@/request/index.js'

Vue.use(NavBar)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Card)

export default {
  data () {
    return {
      value: 0,
      option: [
        { text: '默认排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      min: '',
      max: '',
      searchResList: [],
      renderList: [],
      wd: '',
      brand: ''
    }
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
      // console.log(this.min, this.max)
      this.renderList = this.searchResList.filter(val => {
        return val.price > this.min && val.price < this.max
      })
    },
    onChange (v) {
      switch (v) {
        case 0:
          this.renderList = [...this.searchResList]
          break
        case 1:
          this.renderList.sort((a, b) => {
            return a.price - b.price
          })
          break
        case 2:
          this.renderList.sort((a, b) => {
            return b.price - a.price
          })
      }
    }
  },
  mounted () {
    search({
      s: this.wd,
      brand: this.brand
    }).then(data => {
      this.searchResList = data.data.data
      this.renderList = [...this.searchResList]
      // console.log(this.searchResList)
    })
  },
  created () {
    this.wd = this.$route.query.wd
    this.brand = this.$route.query.brand ? this.$route.query.brand : ''
  }
}
</script>

<style lang="scss">
.searchBox{
  .van-nav-bar__content{
    height: 46px;
  }
}
.myMove-move{
  transition: all 1s;
}
</style>
